<template>
    <div>
        <div class="steps">
            <div class="step" :class="step == 1 || step == 2 || step == 3 || step == 4 ?'green':'' ">1</div>
            <div class="line" :class="step == 1 || step == 2 || step == 3 || step == 4 ?'green':''"></div>
            <div class="step" :class="step == 2 || step == 3 || step == 4 ?'green':''">2</div>
            <div class="line" :class="step == 3 || step == 4 ?'green':''"></div>
            <div class="step" :class="step == 3 || step == 4 ?'green':''">3</div>
            <!-- <div class="line" :class="step == 4 ?'green':''"></div>
            <div class="step" :class="step == 4 ?'green':''">4</div> -->
        </div>
        <div class="stepsText textColor">
            <div>{{ $t('账号注册') }}</div>
            <div>{{ $t('实名认证') }}</div>
            <!-- <div>{{ $t('安全绑定') }}</div> -->
            <div>{{ $t('去交易') }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            step: {
                type: Number | String,
                default: 1
            },
        },
        components: {

        },
        data(){
            return {
                
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
.steps {
    display: flex;
    align-items: center;
    margin-top: 70px;
    padding-left: 20px;

    .step {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 40px;
        color: #fff;
        background: $bg_step;
        border-radius: 50%;
    }

    .line {
        width: 128px;
        height: 9px;
        background: $tab_background;
    }

    .green {
        background: #2EBD85;
    }
}

.stepsText {
    display: flex;
    padding-left: 20px;
    margin-top: 20px;

    div {
        text-align: center;
        width: 208px;

        &:nth-child(1) {
            width: 144px;
            text-align: left;
        }
        &:nth-child(4){
            width: 144px;
            text-align: right;
        }
    }
}
</style>